<template>
  <div class="audit-devired">
    <div class="audit-box">
      <div class="audit-title linear-cyan">
        <span class="icon"><icon-svg name="iconFunc"></icon-svg></span><br />
        计算公式
      </div>
      <div class="audit-content audit-text">
        <sql-logic
          ref="sqlLogic"
          :tagConfigJson="JSON.parse(auditDetail.tagConfigJson)"
          v-if="auditDetail.tagFactoryType === 1"
        ></sql-logic>
        <calculate-logic ref="calculateLogic" :dataLabs="dataLabs" v-else></calculate-logic>
      </div>
    </div>
    <div class="audit-box">
      <div class="audit-title linear-purpose">
        <span class="icon"><icon-svg name="iconCalculateTag"></icon-svg></span><br />
        标签故事
      </div>
      <div class="audit-content audit-text">
        <el-input type="textarea" v-model="auditDetail.tagStory" :rows="7" resize="none" disabled></el-input>
      </div>
    </div>
    <sql-result :config="auditDetail" isAudit v-if="auditDetail.tagFactoryType === 1"></sql-result>
    <div class="audit-box" v-else>
      <div class="audit-title linear-blue">
        <span class="icon"><icon-svg name="iconCalculateResult"></icon-svg></span><br />
        结果预览
      </div>
      <div class="audit-content">
        <div class="result-title">
          <el-row>
            <el-col :span="8" align="center">
              <span>序号</span>
            </el-col>
            <el-col :span="16" align="center">
              <span>字段名</span>
            </el-col>
          </el-row>
        </div>
        <ul class="result-content tag-scrollbar">
          <li v-for="item in showResult" :key="item.order">
            <el-row>
              <el-col :span="8" align="center">
                {{ item.order }}
              </el-col>
              <el-col :span="16" align="center">
                {{ item.number }}
              </el-col>
            </el-row>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import calculateLogic from '@/views/modules/devired/calculate/calculate-logic';
import sqlLogic from '@/views/modules/devired/sql/sql-logic';
import sqlResult from '@/views/modules/devired/sql/sql-result';
export default {
  components: {
    calculateLogic,
    sqlLogic,
    sqlResult
  },
  props: {
    auditDetail: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  computed: {
    dataLabs() {
      return this.auditDetail.tagConfigJson ? JSON.parse(this.auditDetail.tagConfigJson) : []
    },
    showResult() {
      let JSONStr = this.auditDetail.previewResults ? JSON.parse(this.auditDetail.previewResults) : []
      let result = []
      JSONStr.forEach((item, index) => {
        result.push({ order: index + 1, number: item })
      })
      return result
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss">
.audit-devired {
  .preview-logic {
    height: 100%;
  }
}
</style>
